<template>
	<div class="addNote animated bounceInRight">
		<header class="clearfix">
			<span class="pull_left" @click="$router.go(-1)">&times;</span>
			<button type="button" class="pull_right" @click="open">发表</button>
		</header>
		<mt-field label="" placeholder="写点什么呢..." type="textarea" rows="4" v-model="note" :attr="{'maxlength':150}"></mt-field>
		<label for="uploadimg" class="iconfont">&#xe60c;</label>
		<input type="file" name="" multiple="multiple" accept="image/gif, image/jpeg" id="uploadimg" style="display:none" @change="uploadimg($event)">
		<div class="imglists" v-show="uploadImages.length>0">
			<div class="imgs" v-for="(item ,index) in uploadImages">
				<img :src="item.fileUrl" width="90" height="90" >
				<span @click="delImg(index)" :index="index">&times;</span>
			</div>
		</div>
		<mt-progress :value="progress" v-show="progress>0" :barHeight="5">
			<div slot="start">0%</div>
			<div slot="end">100%</div>
		</mt-progress>
		<!-- <loading v-show="!is_uploading"></loading> -->
	</div>
    <!-- <div class="loading" v-show="is_uploading">
      	<mt-spinner :type="0" color="#26a2ff"></mt-spinner>
      </div> -->
  </template>
  <script type="text/javascript">
  	import { Field,Indicator,Toast} from 'mint-ui';
  	import upto_Qiniu from '@/base/js/uptoQiniu';
  	import {getToken} from '@/base/js/getToken';
  	import loading from "@/base/loading";
  	import {uuid} from '@/base/js/uuid';
  	var onlyid=uuid();
  	import axios from 'axios';
  	axios.defaults.withCredentials=false;
  	import store from '@/vuex/store'
  	export default {
  		name:"addNote",
  		data(){
  			return {
  				note:"",
  				is_uploading:false,
  				uploadImages:[],
				// filesData:null,
				progress:0
			}
		},
		store,
		components:{
			Indicator
		},
		methods:{
			delImg(index){
				this.uploadImages.splice(index,1);
			},
			uploadimg(e){
				let data=e.target.files[0];
				//this.filesData=data;
				// window.URL.revokeObjectURL(imgurl);
				// var formData=new FormData();
				// formData.append("uploadimg",data);
				if(data && this.uploadImages.length<9){
					let imgurl=window.URL.createObjectURL(data);
					data.fileUrl=imgurl;
					/*var formData=new FormData();
					formData.append("uploadimg",this.filesData);
					formData.append("token",this.token);*/
					this.is_uploading=!this.is_uploading;
					this.uploadImages.unshift(data);
					this.imgPre=imgurl;	
				}else{
					Toast({
						message:"最多上传9张哦！！"
					})
				}		
			},
			open(){
				if(!this.$store.state.islogin){
					Toast({
						message:"请先登录，再发帖"
					})
					setTimeout(()=>{
						this.$router.push("/login");
					},13)
					return false;
				}else{
					var	that=this;
					if(that.note!=""){
						if(this.uploadImages.length > 0){
							var thenable=Promise.resolve(0);
							getToken().then((token)=>{
								// var uuid=uuid();
								var data={
									"reText":this.note,
									"reImgFlag":onlyid,
								}
								axios.post("http://huidoo.com.cn/utopia/insertPost.action" ,data).then((res)=>{
									for(var i=0;i<this.uploadImages.length;i++){
										var obj={
											file: this.uploadImages[i],
											token: token,
											key: this.uploadImages[i].name
										}
										thenable=thenable.then(upto_Qiniu(obj,i,onlyid));
										this.progress=i/this.uploadImages.length*100;
									}
								}).catch(()=>{
									Toast({
										message:"网络错误"
									})
								})
								 
							thenable.then((res)=>{
								Toast({
									message:"发表成功！"
								})
							}).catch((error)=>{
								Toast({
									message:error
								})
							})
							});	
						}else{
							var data={
									"reText":this.note
							}
							axios.post("http://huidoo.com.cn/utopia/insertPost.action" ,data).then(res=>{
								if(res.data[0].CODE=="8888"){
									Toast({
										message:"发表成功！"
									})

								}
							})
						}
				}else{
					Toast({
						message:"请选择图片或输入文字"
					})
				}
			}

		}

	},
	mounted(){
			/*console.log();
			var that=this;
			setTimeout(function(){
				// that.hideLoading();
			},2000)*/

		}
	}
</script>
<style type="text/css" lang="less">
.addNote{
	//animation:don 1s;
	button{
		border: 0;
		background: 0;
		font-size: 15px;
		color: #0761e8;
		outline: 0;
	}
	label{
		font-size: 70px;
		margin: 0 auto;
		display: block;
	}
	span.pull_left{
		font-size:20px;
	}
}

.imglists{
	.imgs{
		display: inline-block;
		margin: 5px;
		position: relative;
		span{
			position: absolute;
			right:0;
			top:0;
			font-size:16px;
		}
	}
}
@keyframes don{
	from{
		transform:scale(1.2)
	}
	to{
		transform:scale(1)
	}
}
</style>